<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="top">
    <span>我是定海神针</span>
</div>

<span id="yyy">我不做大哥很多年</span>

<div id="hh">
    <div class="x">哈哈哈</div>
    <div class="x">哈哈哈</div>
    <div class="x">哈哈哈</div>
    <div class="x">哈哈哈</div>
    <div class="x">哈哈哈</div>
    <span>
        <div>解决</div>
    </span>
</div>


<button type="button" id="show">显示</button>
<button type="button" id="del">删除</button>

<script src="jquery-3.4.0.min.js"></script>
<script>

    // $('#top').append('<span>发生地方发生的水电费</span>')
    // $('#top').prepend('<span>发生地方发生的水电费</span>')
    // $('#top').append($('#yyy'))

    $('#yyy').clone().appendTo($('#top'));

    // $('#top').after('<span>发生地方发生的水电费</span>')
    // $('#top').before('<span>发生地方发生的水电费</span>')

    // 将选中元素的子元素全部删除
    // $('#top').empty()


    // $('#top').remove();
    // $('#top').detach();

    var DHSZ = $('#top');

    $('#del').click(function () {
        DHSZ.detach()
        // DHSZ.remove()
    });

    $('#show').click(function () {
        $('#yyy').before(DHSZ)
    })

    $('#top').click(function () {

        alert(11111)
    })


    // $('#hh div').click(function () {
    //     alert(222)
    // });
    //
    // $('#show').click(function () {
    //
    //     $('#hh').append('<div class="x">哈哈哈</div>')
    // });
    //
    // $('#hh').on('click', ".x", function () {
    //     alert(222)
    // })


    // $('#show').on('click',{xxxxxx: 12222}, function (e) {
    //
    //     console.log(e)
    //
    // })

    // $('#del').mouseover(function () {
    //
    //     $(this).css('border', 'solid 2px red')
    // })
    //
    // $('#del').mouseout(function () {
    //
    //     $(this).css('border', 'solid 2px green')
    // })

    // $('#del').hover(function () {
    //     $(this).css('border', 'solid 2px red')
    // }, function () {
    //     $(this).css('border', 'solid 2px green')
    // })







    
    




</script>
</body>
</html>